<template>
	<view class="container f-dc">

		<u-navbar class="head" title="汇智助手" :safeAreaInsetTop="true" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="u-nav-slot x-f" slot="left">
				<u-icon color="#fff" name="list-dot" :size="25" @click="toggle"></u-icon>
			</view>

			<view class="u-nav-slot" slot="right">
				<m-capsule></m-capsule>
			</view>
		</u-navbar>


		<!-- 消息列表 -->
		<view class="message-box f-dc">
			<view class="container_top" v-if="messages.length==0">
				<image src="/static/image/Logo/120x120.png">
				</image>
				<view class="title">
					嗨！我是 汇智助手
				</view>

				<view class="title_span">
					<text>想了解什么？尽管问我！</text>
				</view>
			</view>

			<scroll-view class="message-list" ref="scrollView" :style="{ height: scrollHeight + 'px'}" scroll-y
				:scroll-into-view="scrollToId" :scroll-with-animation="true">
				<view class="message-list-messages" v-for="(msg, index) in messages" :id="'msg' + index"
					:key="'msg' +index">

					<view class="message-item" :class="[msg.role === 'user' ? 'user-message' : 'bot-message']">
						<!-- 消息内容 -->
						<view class="message-content" v-if="!msg.loading"
							:style="{ width: msg.role == 'bot' ? '100%' : 'auto' }">

							<view class="" v-show="msg.type == 'image'||msg.type == 'imageText'">
								<image :src="item.thumb" mode="widthFix" class="message-image"
									v-for="(item,imgidx) in msg.images" @click="previewImage(item.thumb)"></image>
							</view>

							<!-- 文件消息 -->
							<view v-show="msg.type === 'file'||msg.type=='fileText'" class="file-box">
								<view v-for="(ite,idx) in msg.fileList" :key="'file'+idx" class="file-view">

									<view class="file-text" @click="handlePreview(ite)">{{ite.name}}</view>
									<view class="file-box-bottomview">
										<image :src="icons[ite.fileType || 'file']" mode="aspectFill"
											class="file-box-bottomview-icon"></image>
										<text class="file-box-bottomview-text">{{ite.Suffix}}</text>
									</view>

								</view>

								<view class="file-box-list" v-for="(report, index) in msg.RankingList" :key="index"
									v-show="msg.role !== 'user'">

									<uni-section :title="report.title" class="uni-section1"></uni-section>
									<view class="table">
										<uni-section class="uni-section2" title="表格">
											<template v-slot:right>
												<uni-icons fontFamily="CustomFontPlatform" :size="20"
													@click="GoAiDetails(report)"
													color="#666666">{{ $utils.toUniCode('&#xeaa0;') }}</uni-icons>
											</template>
										</uni-section>
										<scroll-view scroll-x="true" scroll-y="true" class="scroll-view-fileList">

											<table class="scroll-view-uni-table" ref="table" border stripe
												emptyText="暂无更多数据">
												<tr>
													<th v-for="(col, colIndex) in report.columns" :key="colIndex">
														{{ col.title }}
													</th>
												</tr>
												<tr v-for="(row, rowIndex) in report.data" :key="rowIndex">
													<td v-for="(col, colIndex) in report.columns" :key="colIndex">
														{{ row[col.key] }}
													</td>
												</tr>
											</table>
										</scroll-view>

									</view>

								</view>
							</view>

							<!-- 文本消息 -->
							<text :class="[msg.role === 'user' ? 'user-text' : 'bot-text']" v-if='msg.content'
								v-show="msg.type == 'text'||msg.type=='imageText'||msg.type=='fileText'" selectable
								@longpress='copyText(msg.content)'>{{ msg.content }}</text>
							<view class="message-file-icon" v-show="msg.role == 'bot'">
								<u-icon :name="msg.isupFilled ? 'thumb-up-fill' : 'thumb-up'" :size='20'
									@click="toggleIcon('上',index)"></u-icon>
								<u-icon :name="msg.isdownFilled ? 'thumb-down-fill' : 'thumb-down'" :size='20'
									@click="toggleIcon('下',index)"></u-icon>
								<u-icon name="attach" :size='20' @click="quoteClick(msg)"></u-icon>
							</view>
						</view>

						<!-- 加载状态 -->
						<view v-if=" msg.loading" class="loading">
							<uni-load-more :status="msg.loading ? 'loading' : 'more'"
								:content-text="contentText"></uni-load-more>
						</view>
					</view>
				</view>
			</scroll-view>

		</view>

		<view class="message-list-input" :style="footerStyle">
			<view style="height: 10px;width: 100%;background-color: rgba(0,0,0,0.3);position: absolute;top: -10px;">
			</view>

			<!-- <u-sticky> -->
			<view style="width: 100%;">
				<view class="x-f" v-if="selectFileList.length"
					style="padding: 10px; display: inline-flex; white-space: nowrap; overflow-x: auto; width: 100%;">
					<view v-for="(item,index) in selectFileList" :key="index" style="
				      display: inline-flex;
				      flex-shrink: 0;
				      height: 50px;
				      width: 180px;
				      padding: 10px;
				      border: 1px solid #e8e8e8;
				      border-radius: 12px;
				      position: relative;
				      margin-right: 10px;
				      align-items: center;
				    ">

						<!-- 删除按钮 -->
						<view class="x-c" @click="deleteChoceFile(item,index)"
							:style="{background:item.status == 500 ? '#e70000' : '#fff'}"
							style="position: absolute;right: -5px;top: -5px;background-color: #fff;border-radius: 99999px;border: 1px solid #e8e8e8;width: 20px;height: 20px;">
							<uni-icons :color="item.status == 500 ?  '#fff':'#333'" type="closeempty"
								size="12"></uni-icons>
						</view>

						<!-- 文件图标 -->

						<image style="width: 40px; height: 30px;border-radius: 12px;" mode="aspectFit"
							:src="uploadFileTypeBack(item.fileType)"></image>

						<!-- 文件信息 -->
						<view class="f-dc" style="
				      flex: 1;
				      margin-left: 10px;
				      min-width: 0;
				      font-size: 12px;
				      width: calc(100% - 50px); /* 留出图标和边距空间 */
				    ">
							<view style="
				        white-space: nowrap;
				        overflow: hidden;
				        text-overflow: ellipsis;
				        max-width: 100%;
				      ">
								{{ item.showText }}
							</view>
							<view :style="{color: item.status == 500 ? '#e70000' :'#999'}">

								<text v-if="item.uploadType == '已完成'">{{ formatFileSize(item.size) }}</text>
								<text v-else>{{item.uploadType}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 选择图片和文件临时放置 -->
				<!-- <view class="" style="width: 100%;">
					<u-upload v-show="images.length>0" :fileList="images" ref='uploadRef' multiple :maxCount="5"
						:previewFullImage="true" @afterRead="afterRead" @delete="deletePic"></u-upload>
				</view>
				<view class="mgb-16 file-wrap" v-for="(item, index) in fileList" :key="index">
					<view class="btn-click file-line x-f" @click="handlePreview(item)">
						<view class="file-info">
							<image :src="icons[item.fileType || 'file']" mode="aspectFill" class="file-icon"></image>
							<text class="file-name">{{ item.name || title[type] }}</text>
						</view>
						<image :src="icons.close" mode="aspectFill" class="file-icon"
							@click.stop="handleDeleteFile(index)"></image>
					</view>
				</view> -->


				<!-- 输入区域 -->
				<view class="input-area">
					<u-search bgColor='#f5f5f5' searchIcon="none" height="46" placeholder="给 汇智助手 发送消息"
						v-model="inputText" @change='focusextMessage' shape="round" :showAction='false'
						@focus="handleFocus" @blur="handleBlur" :animation="false" @search="sendTextMessage">
					</u-search>

					<view class="input-area-Button">
						<uni-icons style="transition: transform 0.5s ease;" type="plusempty" :size="24" color="#333"
							@click='plusemptyClick' :class="{ 'rotated': isRotated }"></uni-icons>

						<view class="x-c" :style="{background: EnterFunBack}"
							style="width: fit-content;width: 34px;height: 34px;padding: 4px;border-radius: 9999px;background-color: #98c4fe;font-weight: 600;">
							<uni-icons type="arrow-up" :size="22" color="#fff" @click="sendTextMessage"></uni-icons>
						</view>

					</view>
					<!-- 引用 -->
					<view class="mgb-16 file-wrap" v-show='currentQuote.content'>
						<view class="btn-click file-line x-f">
							<view class="file-info">
								<text class="file-name">{{ currentQuote.content }}</text>
								<image :src="currentQuoteIcons[currentQuote.type]" mode="aspectFill" class="file-icon">
								</image>
							</view>
							<image :src="icons.close" mode="aspectFill" class="file-icon"
								@click.stop="deleteCurrentQuote()"></image>
						</view>
					</view>


				</view>

				<!-- 下面选择图片还是文件 -->
				<!-- <view class="actionButtons" v-show="buttonsShow">
					<view class="actionButtons_views">
						<view class="actionButtons_view"> 
							<uni-icons type="image" :size="25" @click="chooseImage" class="action-icon" />
						</view>
						<text>图片</text>
					</view>
					<view class="actionButtons_views">

						<view class="actionButtons_view">
							<uni-icons type="paperclip" size="40rpx" @click="goUpload" class="action-icon" />
						</view>
						<text>文件</text>

					</view>

				</view> -->

				<u-transition :show="buttonsShow" mode="slide-up" :duration="buttonsShow ? 300 : 50">
					<u-row customStyle="margin-bottom: 10px;padding: 0 20px 10px;" gutter="14">
						<u-col span="4">
							<view class="y-f" style="width: 100%;" @click="chooseImage(1)">
								<view class="x-c"
									style="width: 100%;height: 80px;background-color: #f5f5f5;border-radius: 20rpx;margin-bottom: 10rpx;">
									<uni-icons type="camera-filled" color="#494949" :size="34"
										class="action-icon"></uni-icons>
								</view>

								<text style="font-size: 12px;color: #494949;">拍照</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="y-f" style="width: 100%;" @click="chooseImage(2)">
								<view class="x-c"
									style="width: 100%;height: 80px;background-color: #f5f5f5;border-radius: 20rpx;margin-bottom: 10rpx;">
									<uni-icons type="image" color="#494949" :size="34" class="action-icon"></uni-icons>
								</view>

								<text style="font-size: 12px;color: #494949;">图片</text>
							</view>
						</u-col>
						<u-col span="4">
							<!-- <view class="y-f" style="width: 100%;" @click="goUpload"> -->
							<m-chooseFile style="width: 100%;" @readJSONFinish="readFile">
								<view class="y-f">
									<view class="x-c"
										style="width: 100%;height: 80px;background-color: #f5f5f5;border-radius: 20rpx;margin-bottom: 10rpx;">
										<uni-icons type="paperclip" color="#494949" :size="34"
											class="action-icon"></uni-icons>
									</view>

									<text style="font-size: 12px;color: #494949;">文件</text>

								</view>


							</m-chooseFile>
						</u-col>
					</u-row>


					<!-- <view class="actionButtons">


						<view class="actionButtons_views">
							<view class="actionButtons_view">
								<uni-icons type="image" :size="25" @click="chooseImage" class="action-icon" />
							</view>
							<text>图片</text>
						</view>
						<view class="actionButtons_views">

							<view class="actionButtons_view">
								<uni-icons type="paperclip" size="40rpx" @click="goUpload" class="action-icon" />
							</view>
							<text>文件</text>

						</view>

					</view> -->
				</u-transition>


			</view>

			<!-- </u-sticky> -->


		</view>

		<!-- 左侧列表 -->
		<uni-popup ref="popup" type="left" background-color="#fff">
			<view class="f-dc" style="height: 100vh;">
				<view :style="{height:safeAreaTop+'px'}"></view>


				<view style="flex:1;width: 30vw;overflow-y: auto;min-width: 300px;padding: 0 10px;">

					<view class="y-c" style="align-items: center;height: 100%;" v-if="messageListByHistory.length==0">
						<text style="font-size: 20px;color:#0a0a0a;font-weight: 600;margin-bottom: 10px;">暂无对话</text>
						<text style="font-size: 16px;color:#737373;">你与 汇智助手 的对话</text>
						<text style="font-size: 16px;color:#737373;">将展示在这里</text>
					</view>


					<block v-for="(group, index) in hisMsgListBackFun(messageListByHistory)" :key="index">
						<m-sticky container-cls="conn" :top="safeAreaTop">
							<view class="group-title">{{ group.dateType }}</view>
						</m-sticky>
						<view class="group-content">
							<block v-for="(item, i) in hisMsgListNoodBackFun(group.nood)" :key="i">
								<view class="item" @click="selectHistoryItem(item, index,i)"
									:class="{'item_active': ChoiceHisData.id == item.id}">
									<text class="item-content">{{ item.content }}</text>
								</view>
							</block>
						</view>
					</block>
				</view>

				<view class="hisListSetBox x-ec" style="border-top: 1px solid #f8f8f8;"
					:style="$utils.disposeSafeBottomFun()">
					<view style="padding: 10px;">
						<!-- <button size="small" type="warn" style="padding: 10px;" @click="deleteHistory">
							<u-icon color="#fff" name="trash-fill" :size="25"></u-icon>
						</button> -->
						<uni-icons @click="showActionSheet" type="more-filled" size="30"></uni-icons>

					</view>

				</view>

			</view>

		</uni-popup>
		<u-toast ref="uToast"></u-toast>



	</view>
</template>

<script>
	const open = uni.requireNativePlugin("Html5App-openFile");
	import {
		request
	} from './base'
	import requestByUrlAPP from './base'

	import DB from '@/uni_modules/mc-ui/components/m-sqlite/js_sdk/sqlite.js';
	import UseSqlite from '@/uni_modules/mc-ui/components/m-sqlite/js_sdk/sqlite-use.js';
	var UseSqliteFun = UseSqlite;
	export default {

		data() {
			return {
				tableKeyName: "", // 数据库表名


				isKeyboardVisible: false, // 键盘是否可见

				scrollHeight: 0, //列表高度
				currentQuote: {}, //引用内容
				isupFilled: false, //判断是否点赞
				isdownFilled: false, //判断是否点赞
				title: {
					image: '图片',
					video: '视频',
					file: '文件',
				},
				currentQuoteIcons: {
					fileText: '/static/image/Ai/icon_table.png',
					text: '',
				},
				icons: {
					upload: '/static/image/Ai/icon_upload.png',
					close: '/static/image/Ai/icon_close.png',
					image: '/static/image/Ai/icon_image.png',
					video: '/static/image/Ai/icon_video.png',
					file: '/static/image/Ai/icon_file.png',
					table: '/static/image/Ai/icon_table.png',
				},
				fileList: [], //文件
				images: [], //图片
				isRotated: false, // 标记图标是否已旋转
				statusBarHeight: 0,
				buttonsShow: false,
				messages: [], // 消息列表
				messageListByHistory: [], // 历史消息列表
				ChoiceHisData: {}, // 选中的历史记录信息
				inputText: '', // 输入文本
				sending: false, // 发送状态
				sendingShow: true,
				scrollToId: '', // 自动滚动定位
				pressTimer: null, // 长按计时器
				contentText: {
					contentdown: '开始思考',
					contentrefresh: '正在思考中……',
					contentnomore: '思考完毕'
				},
				boxList: [{
					id: 1,
					content: '本地历史记录',
					active: false,
					showDelete: false
				}],
				currentTab: 0, // 当前选中的报表索引
				reportList: [],


				selectFileList: [], // 准备上传的文件数据

			}
		},
		onReady() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		created() {
			let that = this;

			let UserInfo = this.$store.state.UserInfo;
			// 表名
			this.tableKeyName = 'appAi_' + UserInfo.Business + '_' + UserInfo.UserID;
			setTimeout(() => {
				that.openSQL();
			}, 300);


		},
		computed: {
			currentReport() {
				return this.reportList[this.currentTab];
			},
			safeAreaTop() {
				return this.$store.state.systemConfig.sysDeviceInfo.safeArea.top;
			},
			// 计算样式
			footerStyle() {
				return this.isKeyboardVisible ? {} : this.$utils.disposeSafeBottomFun();
			},
			EnterFunBack() {
				let bgc = "#98c4fe";
				let hasErr = this.selectFileList.some(item => item.status == 500);
				if (hasErr || this.$utils.isEmpty(this.inputText)) {
					bgc = "#98c4fe";
				} else {
					bgc = "#3a82f8";
				};
				return bgc;
			}
		},
		mounted() {
			let that = this;
			this.$nextTick(() => {
				that.getScollHeightFun();
			})
		},
		beforeDestroy() {},
		methods: {
			// 本地数据库操作
			// 打开数据库
			openSQL() {
				let that = this;
				UseSqliteFun.openSQL((res) => {
					that.searchDraft();
				});
			},
			insetSQLData(data) {

				let that = this;
				let sql =
					'"id" INTEGER PRIMARY KEY AUTOINCREMENT,"role" text,"type" text,"content" text,"timestamp" text,"status" text,"isupFilled" text,"isdownFilled" text,"RankingList" text,"loading" text';

				let param = {
					dbTable: that.tableKeyName,
					sql: sql,
				}

				UseSqliteFun.creatSqlRow(param, function() {
					// 需要存储的数据
					that.insertTableData(data);
					that.$utils.hideLoading();
				}, function(err) {
					that.$utils.hideLoading();
					layer.msg('保存失败');
				});
			},
			// 新增表数据
			insertTableData(arr) {
				let vm = this;
				let that = this;
				let open = UseSqliteFun.isOpen();
				if (open) {
					console.log(arr);
					arr.map(item => {
						// let time = that.$utils.dateFormat(new Date(), 'Y-MM-dd hh:mm:ss');
						let sql =
							`'${item.role || ''}','${item.type || ''}','${item.content || ''}','${item.timestamp || ''}','${item.status || ''}','${item.isupFilled || ''}','${item.isdownFilled || ''}','${JSON.stringify(item.RankingList) || ''}','${item.loading || ''}'`;
						let condition =
							"'role','type','content','timestamp','status','isupFilled','isdownFilled','RankingList','loading'";
						// 新增 DB.insertTableData(表名, 对应表头列的数据)

						let param = {
							dbTable: that.tableKeyName,
							sql: sql,
							condition: condition,
						};
						UseSqliteFun.insertSqlRow(param, function() {
							console.log("新增数据成功");
							that.searchDraft();

							that.$utils.hideLoading();
						}, function(error) {
							that.$utils.hideLoading();
							that.$utils.msg('保存失败');
							console.log("失败", error);
						});
					});

					console.log(that.messageListByHistory);
				} else {
					that.$utils.hideLoading();
					that.$utils.msg("数据库未打开");
				}
			},

			searchDraft() {
				let that = this;
				let open = DB.isOpen();
				if (open) {
					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					// let sql = `SELECT * FROM ${this.tableKeyName} ORDER BY id ASC`;
					// console.log(sql);
					DB.selectTableData(this.tableKeyName)
						.then(res => {
							that.messageListByHistory = res.length ? that.groupHistoryData(res) : [];

						})
						.catch(error => {
							console.log("查询失败", error);
						});
				} else {
					this.showToast("数据库未打开");
				}
			},



			deleteChoceFile(item, index) { // 删除选中的文件
				this.selectFileList.splice(index, 1);
			},
			uploadFileTypeBack(type) {
				let path = "";
				switch (type) {
					case "image":
						path = "/static/image/Ai/img.png";
						break;
					case "text":
						path = "/static/image/Ai/text.png";
						break;
					case "file":
						path = "/static/image/Ai/text.png";
						break;
					default:
						break;
				}
				return path
			},
			formatFileSize(bytes) {
				if (bytes === 0) return '0 B';
				const units = ['B', 'KB', 'MB', 'GB', 'TB'];
				const i = Math.floor(Math.log(bytes) / Math.log(1024));
				const size = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 2 : 0);
				return `${size} ${units[i]}`;
			},
			// 输入框聚焦时触发
			handleFocus() {
				let that = this;
				this.isKeyboardVisible = true;

				setTimeout(() => {
					that.scrollToBottom();
				}, 300);
			},
			handleBlur() { // 输入框失焦
				this.isKeyboardVisible = false;
			},

			getScollHeightFun() {
				let that = this;
				var scrollHeight
				uni.createSelectorQuery().select('.message-box').boundingClientRect(data => {
					scrollHeight = data.height;
					that.scrollHeight = scrollHeight;
					// uni.createSelectorQuery().select('.message-list-input').boundingClientRect(data => {
					// 	console.log(data);
					// 	that.scrollHeight = scrollHeight - data.height;
					// }).exec();
					that.scrollToBottom();
				}).exec()

			},
			// 引用删除
			deleteCurrentQuote() {
				this.currentQuote = {}
			},
			// 引用，如果是报错弹500
			quoteClick(item) {
				return this.$utils.msg("暂不支持引用功能");
				console.log(item);
				if (item.status == 500) {
					this.currentQuote = {
						role: "bot",
						type: "text",
						content: "服务器开小差了，请稍后再试（错误码：500）",
						isupFilled: false,
						isdownFilled: false,
						RankingList: [],

					}
				} else {
					this.currentQuote = item
				}
			},

			hisMsgListBackFun(data) {
				return data.filter(item => item.nood.length);
			},
			hisMsgListNoodBackFun(data) {
				return data.filter(item => item.role == "user");
			},
			selectHistoryItem(item, index, i) { // 选中历史记录
				// 记录选中的标题数据
				this.ChoiceHisData = this.$utils.deepClone(item);
				let findIndex = this.messageListByHistory[index]['nood'].findIndex(row => row.id == item.id);
				let findData = this.$utils.deepClone(this.messageListByHistory[index]['nood'][findIndex - 1]);
				this.$set(findData, 'RankingList', JSON.parse(findData.RankingList));

				this.messages = [item, findData];

			},
			groupHistoryData(data) {
				const now = Date.now();
				const todayStart = new Date();
				todayStart.setHours(0, 0, 0, 0);
				const todayStartTime = todayStart.getTime();

				const yesterdayStartTime = todayStartTime - 86400000; // 24小时前
				const sevenDaysAgoTime = todayStartTime - 7 * 86400000; // 7天前
				const thirtyDaysAgoTime = todayStartTime - 30 * 86400000; // 30天前

				const groups = [{
						dateType: "今天",
						nood: []
					},
					{
						dateType: "昨天",
						nood: []
					},
					{
						dateType: "7天内",
						nood: []
					},
					{
						dateType: "30天内",
						nood: []
					},
				];

				// 使用 Map 存储30天外的数据
				const otherGroups = new Map();

				for (let i = 0; i < data.length; i++) {
					const item = data[i];
					const timestamp = parseInt(item.timestamp, 10);

					if (timestamp >= todayStartTime) {
						groups[0].nood.push(item);
					} else if (timestamp >= yesterdayStartTime) {
						groups[1].nood.push(item);
					} else if (timestamp >= sevenDaysAgoTime) {
						groups[2].nood.push(item);
					} else if (timestamp >= thirtyDaysAgoTime) {
						groups[3].nood.push(item);
					} else {
						const date = new Date(timestamp);
						const yearMonth = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;

						if (!otherGroups.has(yearMonth)) {
							otherGroups.set(yearMonth, []);
						}
						otherGroups.get(yearMonth).push(item);
					}
				}

				// 将 Map 转换为数组并按时间排序
				const sortedOtherGroups = Array.from(otherGroups)
					.sort(([a], [b]) => new Date(a) - new Date(b)) // 按年月排序
					.map(([dateType, nood]) => ({
						dateType,
						nood
					}));

				// 合并结果
				return groups.concat(sortedOtherGroups);
			},
			// 复制文本
			copyText(text) {
				console.log(text);
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'none',
							position: 'top'
						});
					}
				});

			},
			Addstop(msg) {
				var that = this
				console.log(msg);
				that.sending = false
				msg.loading = false
				msg.content = '已停止生成'
				that.updateMessage(msg)
			},
			// 表格查看全屏
			GoAiDetails(list) {
				var url = `./AiDetails?list=${JSON.stringify(list)}`

				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},

			readFile(event) {
				let that = this;
				console.log('文件内容', event)

				let os = plus.os.name;

				if (os != 'Android') {

				} else {
					let obj = {
						...event,
						showText: event.path,
						uploadType: "上传中",
						fileType: "file"
					}
					this.resultPath(event, obj);
				};

			},
			// 选择文件后执行操作
			resultPath(event, data) {
				let that = this;

				let lastIndex = that.selectFileList.length;

				that.selectFileList.push(data);

				uni.uploadFile({
					url: that.Request.IPAgreement() + that.Request.serverIP() +
						'/FileData/UploadSignleFile',
					filePath: event.path,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						uploadFileRes.data = JSON.parse(uploadFileRes.data);
						if (uploadFileRes.data.status == 200) {
							const pathIndex = event.path.lastIndexOf('/');
							const pathName = event.path.substring(pathIndex + 1);
							const fileType = that.getFileType(event.path);
							const flieArr = event.path.split('.');
							let Suffix = flieArr[flieArr.length - 1];
							var obj = {
								// fileType: fileType,
								fileType: 'file',
								Suffix: Suffix,
								url: uploadFileRes.data.data,
								path: uploadFileRes.data.data,
								showText: pathName,
								uploadType: "已完成",
								status: 200,
								size: event.size
							}
							console.log(obj);
							// that.selectFileList.push(obj) 
							this.$set(this.selectFileList, lastIndex, obj);

							// that.fileList.push(obj);
							that.$forceUpdate();
						} else if (uploadFileRes.data.status == 500) {
							data['uploadType'] = '文件无法上传';
							data['status'] = 500;
							this.$set(this.selectFileList, lastIndex, data);
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});

			},
			// 点击选择文件
			goUpload(event) {
				var that = this;
				return this.$utils.msg("暂不支持文件上传");
				if (that.images.length > 0) {
					that.$refs.uToast.show({
						title: '失败',
						type: 'error',
						icon: true,
						message: '操作失败，暂时不能支持图片和文件一起发送'
					})

					return
				}
				that.$refs.filemanager._openFile()
			},
			switchTab(e) {
				this.currentTab = e.detail.current;
			},
			// 通过事件目标判断是否点击空白区域
			handleListClick(e) {
				this.hideAllDeleteIcons()
			},
			// 触摸开始（启动长按计时）
			handleTouchStart(item) {
				this.pressTimer = setTimeout(() => {
					this.showDeleteIcon(item)
				}, 800) // 800ms触发长按
			},

			// 触摸结束（清除计时）
			handleTouchEnd() {
				clearTimeout(this.pressTimer)
			},

			// 显示删除图标
			showDeleteIcon(item) {
				plus.device.vibrate(50)

				this.boxList = this.boxList.map(box => ({
					...box,
					showDelete: box.id === item.id
				}))

			},

			hideAllDeleteIcons() {

				this.boxList = this.boxList.map(box => ({
					...box,
					showDelete: false
				}))
			},

			// 点击盒子
			handleBoxClick(item) {
				// 如果当前点击的盒子没有显示删除按钮
				if (!item.showDelete) {
					this.hideAllDeleteIcons()
					this.toggleActive(item)
					// this.$refs.popup.open('left')

					this.$refs.popup.close()

				}
			},
			// 切换激活状态
			toggleActive(item) {
				this.boxList = this.boxList.map(box => ({
					...box,
					active: box.id === item.id ? !box.active : false
				}))
			},

			// 删除项目
			handleDelete(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此项吗？',
					success: (res) => {
						if (res.confirm) {
							this.boxList = this.boxList.filter(item => item.id !== id)
							this.hideAllDeleteIcons()
						}
					}
				})
			},

			// 点赞
			toggleIcon(str, index) {
				if (str == '上') {
					this.messages[index].isupFilled = !this.messages[index].isupFilled
					if (this.messages[index].isdownFilled == true) {
						this.messages[index].isdownFilled = false
					}
				} else {
					this.messages[index].isdownFilled = !this.messages[index].isdownFilled
					if (this.messages[index].isupFilled == true) {
						this.messages[index].isupFilled = false
					}
				}
			},

			// 点击查看图片和文件
			handlePreview(item) {
				var that = this

				var fileurl = item.url
				var url = 'http://' + that.Request.serverIP() + fileurl
				const fileType = this.getFileType(url);

				if (fileType === 'image') {
					return uni.previewImage({
						current: url,
						urls: [url],
					});
				}
				// #ifndef H5
				if (fileType === 'file') {
					return uni.downloadFile({
						url: url,
						success: function(res) {
							var filePath = plus.io.convertLocalFileSystemURL(res.tempFilePath);
							uni.openDocument({
								filePath: filePath,
								fail: (err) => {
									console.log(err);
									uni.showToast({
										icon: 'none',
										title: '文件预览失败'
									});
								},
							});
						}
					})
				}
				// #endif
				uni.showModal({
					title: '提示',
					content: url,
					showCancel: false,
				});
			},

			// 删除文件
			handleDeleteFile(index) {

				this.fileList.splice(index, 1);
			},

			getFileType(fileName = '') {
				const flieArr = fileName.split('.');
				let suffix = flieArr[flieArr.length - 1];
				if (!suffix) return '';
				suffix = suffix.toLocaleLowerCase();
				const image = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'];
				if (image.includes(suffix)) return 'image';
				const video = ['mp4', 'm4v'];
				if (video.includes(suffix)) return 'video';
				const audio = ['mp3', 'm4a', 'wav', 'aac'];
				if (audio.includes(suffix)) return 'audio';
				const office = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'plain'];
				if (office.includes(suffix)) return 'file';
				return 'unknown';
			},
			// 删除图片
			deletePic(event) {
				var that = this
				that.images.splice(event.index, 1);
				if (that.images.length == 0) {
					console.log(JSON.stringify('触发删除'))
					that.isRotated = false;
					that.sendingShow = true
					that.buttonsShow = false
				}
			},
			// 上传
			async afterRead(event) {
				console.log(event)
				let lists = [].concat(event.file)
				let fileListLen = this.images.length;

				lists.map((item) => {
					this.images.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				console.log(JSON.stringify(this.images))


				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.images[fileListLen]
					this.images.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 上传文件
			uploadFilePromise(url) {
				const that = this;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: that.Request.IPAgreement() + that.Request.serverIP() +
							'/Frame/uploadFile?dirName=Ai提问',
						filePath: url,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data'
						},
						formData: {
							user: 'test'
						},
						success: (uploadFileRes) => {
							try {
								const data = JSON.parse(uploadFileRes.data);
								// 确保服务器返回的数据结构正确，data.data 存在
								if (data && data.data) {
									resolve(data.data);
								} else {
									reject(new Error('响应数据格式错误'));
								}
							} catch (error) {
								reject(new Error('解析响应数据失败'));
							}
						},
						fail: (err) => {
							reject(err); // 必须调用 reject
						}
					});
				});
			},
			// 切换
			change(e) {
				this.hideAllDeleteIcons()
			},

			// 打开侧边栏
			toggle(type) {
				this.$refs.popup.open('left')
			},

			// 打开选择图片文件下拉 
			plusemptyClick() {
				return this.$utils.msg("功能暂未开放！")
				// this.$refs.popup.open('bottom')
				this.isRotated = !this.isRotated;
				this.buttonsShow = !this.buttonsShow

			},
			// input输入触发
			focusextMessage() {

				if (!this.inputText.trim() || this.sending) {
					this.sendingShow = true
				} else {
					this.sendingShow = false
				}
			},


			// 发送文本消息

			async sendTextMessage() {
				var that = this;
				var show = true;
				var userMsg;
				console.log(this.selectFileList);
				console.log(this.messages);



				if (this.selectFileList.length == 0 && this.$utils.isEmpty(this.inputText)) return;

				let hasWaitData = this.messages.some(item => item.status == "待处理");
				if (hasWaitData) {
					return
				}

				let hasError = this.selectFileList.some(item => item.status == 500);

				if (hasError) {
					return that.$refs.uToast.show({
						title: '失败',
						type: 'default',
						iconUrl: "close-circle-fill",
						message: '请删除异常文件再发送'
					})
				}

				console.log(this.selectFileList);
				// this.selectFileList.forEach(item => {
				// 	if (item.fileType == "file") {

				// 	} else if (item.fileType == "image") {

				// 	}
				// });

				userMsg = {
					role: 'user',
					type: 'text',
					content: that.inputText,
					timestamp: +new Date()
				};
				that.addMessage(userMsg);
				if (show) {
					await that.sendToAPI(userMsg);

					that.inputText = '';
					that.buttonsShow = false;
					that.sendingShow = true;
					that.isRotated = false;
				};

				return;

				if (that.images.length > 0) {
					// var userMsg = {
					// 	role: 'user',
					// 	type: 'imageText',
					// 	images: that.images,
					// 	content: that.inputText,
					// 	loading: false,
					// 	timestamp: +new Date()
					// }
					// console.log(userMsg)
					// that.addMessage(userMsg)
					// that.images = []
					show = false
					uni.showModal({
						title: '提示',
						content: '暂时不支持发送照片功能，后续会进行更新',
						success: (res) => {

						}
					})
				} else if (that.fileList.length > 0) {
					console.log(that.fileList);
					show = false
					uni.showModal({
						title: '提示',
						content: '暂时不支持发送文件功能，后续会进行更新',
						success: (res) => {}
					})
					// var lists = JSON.parse(JSON.stringify(that.fileList))
					// var userMsg = {
					// 	role: 'user',
					// 	type: 'fileText',
					// 	fileList: lists,
					// 	content: that.inputText,
					// 	loading: false,
					// 	timestamp: +new Date()
					// }
					// console.log(JSON.stringify(that.fileList))
					// console.log(userMsg)
					// that.addMessage(userMsg)
					// that.fileList = []
				} else {
					if (!that.inputText.trim() || that.sending) return
					userMsg = {
						role: 'user',
						type: 'text',
						content: that.inputText,
						timestamp: +new Date()
					}
					that.addMessage(userMsg)
				}
				if (show) {
					await that.sendToAPI(userMsg)

					that.inputText = ''
					that.buttonsShow = false
					that.sendingShow = true
					that.isRotated = false
				}


			},

			// 选择图片
			async chooseImage(data) {
				var that = this;


				uni.chooseImage({
					count: 9, // 允许最多选择9张图片（或你需要的数量）
					sourceType: data == 1 ? ["camera"] : ["album"], // 可以从相册或相机选择
					success: (res) => {
						// 1、获取选中的图片，做一下映射，插入新的列表数组
						console.log(res.tempFiles);

						// 记录当前数据长度
						let lastIndex = that.selectFileList.length;

						let mapImgData = res.tempFiles.map(item => {
							return {
								...item,
								showText: item.path,
								uploadType: "上传中",
								fileType: "image"
							}
						})
						// 插入数据
						that.selectFileList = that.selectFileList.concat(mapImgData);

						async function uploadAllImagesSequentially() {
							try {
								for (const item of mapImgData) {
									const result = await that.uploadFilePromise(item.path);
									console.log('上传结果:', JSON.stringify(result));
									that.selectFileList[lastIndex]['status'] = 200;
									that.selectFileList[lastIndex]['uploadType'] = "已完成";
									that.selectFileList[lastIndex]['path'] = result;

									function extractFileName(path) {
										// 获取文件名并分割为数组
										const segments = path.split('/').pop().split('.');

										// 当有至少两个片段时（如 xxx.jpg 或 a.b.c.d）
										return segments.length >= 2 ?
											segments.slice(-2).join('.') // 取最后两个部分
											:
											path.split('/').pop(); // 无扩展名时返回原文件名
									}

									that.selectFileList[lastIndex]['showText'] =
										extractFileName(
											result)

									lastIndex++;
								}
							} catch (error) {
								console.error('上传失败:', error);
							}
						}

						uploadAllImagesSequentially()

						that.buttonsShow = false;
						that.sendingShow = false;
						that.isRotated = false;

					},
					fail: (err) => {
						console.error('选择图片失败:', err);
					}
				});
			},

			// 调用API接口
			async sendToAPI(userMsg) {
				var that = this
				const botMsg = {
					status: "待处理",
					role: 'bot',
					type: 'text',
					content: '',
					isupFilled: false,
					isdownFilled: false,
					RankingList: [],
					loading: true,
					timestamp: +new Date() + 10
				}
				that.sending = true
				that.addMessage(botMsg)


				try {
					const params = {
						question: that.inputText
					}
					console.log(params);
					request(params, (ret) => {
						console.log(ret)
						if (ret.type == 'NotCalled') {
							botMsg.status = 200;
							botMsg.content = ret.title
							botMsg.loading = false
							that.sending = false
							console.log(botMsg);
							that.updateMessage(botMsg)
						} else if (ret.type == 'uinfo') {
							botMsg.status = 200;
							botMsg.content = ret.content
							botMsg.loading = false
							that.sending = false

							console.log(botMsg);
							that.updateMessage(botMsg)
						} else if (ret.type == 'sql') {
							let formData = Object.assign({
								sql: ret.query
							}, {})

							// that.Request.requestByUrl(
							requestByUrlAPP.requestByUrl(
								"/SQLData/QuerySql",
								formData,
								function(data) {
									console.log(data)
									if (data.ds.length == 0) {
										botMsg.status = 200;
										var str = that.getindexOf(ret.title, data.ds)
										botMsg.content = str
										botMsg.loading = false
										that.sending = false
										that.updateMessage(botMsg)
									} else {
										var str = that.getindexOf(ret.title, data.ds)
										JSON.stringify(JSON.stringify(str))
										botMsg.status = 200;
										botMsg.RankingList = str
										botMsg.content = ret.title
										botMsg.type = 'fileText'
										botMsg.loading = false
										that.sending = false
										console.log(botMsg);
										that.updateMessage(botMsg)
									}

								},
								function(err) {
									console.log(err)
									botMsg.status = err.status
									var title = '当前知识库暂无当前相关信息，后续进行更新'
									botMsg.content = title
									botMsg.loading = false
									that.sending = false

									that.updateMessage(botMsg)
								});
						}
					}, (err) => {
						console.log(err)
						botMsg.status = err.statusCode;
						that.sending = false
						botMsg.content = '服务器繁忙，请稍后再试。'
						botMsg.loading = false
						that.updateMessage(botMsg)
					})

				} catch (error) {
					botMsg.status = 500;
					that.sending = false;
					botMsg.content = '服务器繁忙，请稍后再试。';
					botMsg.loading = false;
					that.updateMessage(botMsg);

				}


			},

			// 添加消息
			addMessage(msg) {
				this.messages.push(msg)
				this.scrollToBottom()
			},


			// 更新消息
			updateMessage(newMsg) {
				let that = this;

				const index = this.messages.findIndex(msg => msg.timestamp === newMsg.timestamp)
				if (index > -1) {
					this.$set(this.messages, index, newMsg);


					// 获取提问的数据和回答的数据，插入本地数据库
					let question = this.messages[index - 1]; // 问题
					let replied = newMsg; // 问题


					that.insetSQLData([question, replied])
				};
				that.scrollToBottom();
			},

			// 滚动到底部
			scrollToBottom() {
				let that = this;
				that.$nextTick(() => {
					// 先清空，再赋值相同的 id
					that.scrollToId = ''; // 强制触发变更
					const lastIndex = that.messages.length - 1;
					setTimeout(() => {
						that.scrollToId = `msg${lastIndex}`
					}, 300)
				})

			},

			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			// 退出
			leftout() {
				uni.navigateBack()
			},

			showActionSheet() {
				let that = this;
				uni.showActionSheet({
					itemList: ['删除所有历史对话'],
					success: function(res) {
						console.log(res.tapIndex);
						if (res.tapIndex == 0) {
							that.deleteHistory();
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 删除历史记录
			deleteHistory() {
				let that = this;
				uni.showModal({
					title: '删除所有对话',
					content: "如果点击确认删除，当前账号的所有历史对话将被清空，无法找回。确认要删除所有历史对话吗？",
					confirmText: "确认删除",
					confirmColor: "#ba2e39",
					cancelColor: "#0f2467",
					success: (res) => {
						if (res.confirm) {
							UseSqliteFun.deleteSqlRow({
								dbTable: that.tableKeyName
							}, function(ret) {
								console.log(ret);

								that.$refs.uToast.show({
									type: 'success',
									iconUrl: "checkmark-circle-fill",
									message: '删除成功'
								})
								// 清空弹层数据
								that.messageListByHistory = [];
								// 清空主页数据
								that.messages = [];

								that.$forceUpdate()
							}, function(err) {
								console.log(err);
							})



						}
					}
				})

			},
			// 判断接口返回值
			getindexOf(fileName, ds) {
				if (ds.length == 0) {
					return ' 抱歉，当前没有与您的搜索匹配的内容 建议您:检查关键词拼写或尝试简化术语  感谢您的理解与支持！ 我们将持续完善内容库。 '
				} else {

					let list = [];
					// 获取所有可能的键
					const keys = Object.keys(ds[0] || {});

					// 动态生成列配置
					const columns = keys.map(key => ({
						title: key,
						key: key,
						width: 200,
						formatter: (value) => {
							if (typeof value === 'number' && key.includes('量')) {
								return value.toLocaleString('zh-CN', {
									maximumFractionDigits: 2
								});
							}
							return value;
						}
					}));

					// 构建表格数据结构
					list = [{
						minWidth: columns.length * 200,
						columns: columns,
						data: ds.map(item => {
							// 动态映射所有键值
							const row = {};
							keys.forEach(key => {
								row[key] = item[key] ?? '-'; // 空值显示占位符
							});
							return row;
						})
					}];
					return list

				}
			},

		}
	}
</script>

<style lang="scss">
	$h-padding: 15rpx;
	$v-padding: 20rpx;
	$radius: 10rpx;

	.ellipsis {
		width: 100%;
		/* 必须定义宽度 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		white-space: nowrap;
		/* 禁止换行 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.file-wrap {
		.file-line {
			// height: 100rpx;
			// height: 
			box-sizing: border-box;
			width: 100%;
			background: #eee;
			// background: #F5F5F5;
			border-radius: 8rpx;
			padding: 10px;
			font-size: 12px;
			color: #1A1A1A;
			// line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.file-info {
				width: 90%;
				display: flex;
				align-items: center;

				.file-name {
					max-width: 80%;
					padding-left: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.file-icon {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}

			.file-empty {
				color: #999999;
			}
		}
	}

	.uni-nav_bar {
		flex-shrink: 0;

		.input-view {
			width: 100%;
			justify-content: center;
			display: flex;
			align-items: center;
			height: 100%;

			text {
				font-size: 30rpx;
				font-weight: bold !important;

			}
		}
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		// background-color: #fff;
		// padding-bottom: 15vh;

	}

	.slotRight {
		display: flex;
		align-items: center;

		.u-icon {
			display: inline-block;
			margin: 0 5rpx;
		}
	}

	.container_top {
		margin-top: 100px;
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		flex-direction: column;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20%;
		}

		.title {
			margin-top: 25rpx;
			max-width: 70%;
			font-weight: 600;
			font-size: 18px;
			width: 100%;
		}

		.title_span {
			margin-top: 25rpx;
			max-width: 70%;
			font-size: 14px;
			color: #999;
		}
	}

	.message-box {
		padding: 20px 0 0 0;
		// height: 100%;
		flex: 1;
		overflow: hidden;

		.message-list {
			padding: 20px 0 0;
			box-sizing: border-box;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			// background-color: yellow;

			.message-list-messages {
				padding: 0 20rpx;
				box-sizing: border-box;
				flex: 1;
			}
		}

		.message-list-input {
			width: 100%;
			// margin-top: auto;
			// min-height: 20vh;
			// padding: 1vh 0 5vh 0;
			box-sizing: border-box;
			position: relative;
		}
	}



	.message-item {
		margin: 20rpx 0;
		max-width: 100%;

		.message-item-img {
			image {
				width: 85rpx;
				height: 85rpx;
				margin: 0 20rpx;
				border-radius: 20%;
				padding: 0;
			}
		}

		&.user-message {
			margin-left: auto;
			display: flex;
			justify-content: flex-end;
			margin-right: 10rpx;


			.message-content {
				display: inline-block;
				background: #fff;
				color: #000;
			}

			.user-text {

				float: right;
				display: inline-block;
				background: #ebf3ff;
				color: #010d0d;
				// background: #66b1ff;
				// color: #fff;
				padding: 10px 15px;
				border-radius: 20px;
			}
		}

		&.bot-message {
			width: 100%;
			display: flex;
			justify-content: left;
			margin-right: auto;

			.message-content {
				background-color: #f5f5f5;
				display: inline-block;
				color: #333;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}
		}
	}

	.message-content {
		padding: 20rpx;
		border-radius: 18rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}

		.message-file-icon {
			display: flex;
			align-items: center;
			margin: 10rpx 0;

			.u-icon {
				margin: 0 10rpx;
			}
		}
	}

	.input-area {
		width: 100%;

		padding: 10px 10px 4px;
		background: white;
		// border-top: 1rpx solid #eee;
		box-sizing: border-box;

		.input-box {

			box-sizing: border-box;
			margin: 0 20rpx;

		}

		.input-area-Button {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 10rpx;

			.uni-icons {
				margin: 0 10px;
			}

			.send-btn {
				background: #007AFF;
				color: white;
				border-radius: 40rpx;
				padding: 0 30rpx;
				height: 70rpx;
				margin: 0;
				line-height: 70rpx;
			}

			.rotated {
				transform: rotate(45deg);
			}
		}

	}

	.actionButtons {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;
		// background: white;
		// border-top: 1rpx solid #eee;
		// justify-content: space-around;

		.actionButtons_views {
			align-items: center;
			text-align: center;

			text {
				font-size: 25rpx;

			}

			.actionButtons_view {
				height: 80rpx;
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				background-color: #f5f5f5;
				border-radius: 20rpx;

			}
		}



	}




	.message-image {

		max-width: 400rpx;
		border-radius: 8rpx;
		margin: 0 10rpx;
	}

	.file-box {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		border-radius: 8rpx;
		flex-wrap: wrap;
		box-sizing: border-box;


		.file-view {
			padding: 20rpx;
			width: 300rpx;
			height: 150rpx;
			border: 1px solid #eee;
			margin: 0 5rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.file-text {
				font-size: 12px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.5em;
				max-height: 3em;
				word-break: break-all;
				color: #000;
			}

			.file-box-bottomview {

				display: flex;
				align-items: center;

				.file-box-bottomview-icon {
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}

				.file-box-bottomview-text {
					font-size: 12px;
				}
			}


		}

		.file-box-list {
			width: 100%;

			.uni-section1 {
				background-color: #f5f5f5;
				font-weight: 600;
			}

			.table {
				width: 100%;
				overflow: hidden;
				border-radius: 10px;
				border: 1px solid #d4d4d4;

				.uni-section2 {
					background-color: #dcdcdc;
					font-weight: 600;
				}

				table {
					width: 100%;
					border-collapse: collapse;
					color: #fff;

					tr {
						th {
							text-align: center;
							color: #000;
							font-size: 10px;
							height: 34px;
							white-space: nowrap;
							padding: 0 5px;
							border: 1px solid #d4d4d4;
							background: #e7e7e7;
							position: sticky;
							z-index: 10;
							position: sticky;
							top: 0;
						}

						td {
							text-align: center;
							font-size: 10px;
							height: 34px;
							white-space: nowrap;
							padding: 0 5px;
							border: 1px solid #d4d4d4;
							color: #000;
							position: relative;
						}
					}
				}
			}

		}

	}

	.loading {
		padding: 10rpx 0;
	}

	.popup_content {
		padding: 20px;
		display: flex;
		flex-direction: column;

		.uni-icons {
			padding: 0 10px;
		}
	}



	.popup-content {
		width: 70vw !important;
		height: 100%;
		margin: 5vh 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);

		.popup-content-box {
			position: relative;
			height: 50rpx;
			margin: 20rpx;
			padding: 35rpx;
			border-radius: 12rpx;
			transition: all 0.3s;
			display: flex;
			align-items: center;
		}

		.popup-content-content {
			font-size: 20rpx;
			width: 80%;
			color: #333;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.popup-content-delete-icon {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			// padding: 10rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		/* 点击态效果 */
		.popup-content-box:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}

	.scroll-view-fileList {
		width: 100%;
		white-space: nowrap;
		border-radius: 20rpx;

		height: auto;
		/* 最大高度限制为20vh */
		max-height: 20vh;

		.scroll-view-uni-table {
			// min-width: auto;
			width: 100%;
			min-height: auto;
			overflow: visible !important;
		}
	}


	.group-title {
		font-size: 14px;
		color: #666;
		padding: 10px;
		// background-color: #f9f9f9;
	}

	.group-content {
		background-color: #fff;

		.item {
			padding: 15px 10px;

			.item-content {
				font-size: 16px;
				color: #000;
			}

			&_active {
				background-color: rgba(81, 208, 208, 0.1);
				border-radius: 12px;

				.item-content {
					color: #51d0d0 !important;
				}
			}
		}

	}
</style>